<template>
    <!-- 顶部标题 -->
    <view class="Login">
        <!-- 顶部标题 -->
        <TopBar></TopBar>

        <!-- 功能区 -->
        <view class="function" >
            <view v-for="item in menu.funcList" style="margin-bottom: 10px; background-color: #FFFFFF; ">

                <!-- 标题 -->
                <view class="function-title funcNametitle">
                    {{ item.funcName }}
                </view>
                <!-- 子功能区域 -->
                <view class="Sub-function">
                    <view v-for="itmefone in item.children" @click="funict(itmefone.route)">
                        <view class="Sub-function-min" >
                            <view>
                                <image :src=itmefone.icon class="Sub-function-min-image"></image>
                            </view>
                            <view>
                                <text class="Sub-function-min-text">{{ itmefone.funcName }}</text>
                            </view>
                        </view>

                    </view>
                </view>



            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import TopBar from "@/components/TopBar.vue"

let menu = {
    "success": true, // 接口状态：成功/失败
    "message": "操作成功", // 提示信息
    "funcList": [ // 一级功能列表
        {
            "funcId": "1", // 功能ID（小写驼峰命名）
            "funcName": "车间", // 功能名称
            "children": [
                {
                    "funcId": "1",
                    "funcCode": "WCSInStore",
                    "funcName": "配料核对",
                    "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                    "route": "/pages/WorkShop/MaterialCheck/MaterialCheck", // 页面路由
                },
                {
                    "funcId": "2",
                    "funcCode": "WCSInStore",
                    "funcName": "配料投料",
                    "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                     "route": "/pages/WorkShop/MateriaThrow/MateriaThrow", // 页面路由
                },
                {
                    "funcId": "3",
                    "funcCode": "WCSInStore",
                    "funcName": "配料退料",
                    "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                    "route": "/pages/WorkShop/MaterialReturn/MaterialReturn" // 页面路由
                }, {
                    "funcId": "4",
                    "funcCode": "WCSInStore",
                    "funcName": "出锅称料",
                    "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                    "route": "/pages/store/index" // 页面路由
                }, {
                    "funcId": "5",
                    "funcCode": "WCSInStore",
                    "funcName": "工单质检",
                    "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                    "route": "/pages/WorkShop/WorkOrderInspect/WorkOrderInspect" // 页面路由
                }, {
                    "funcId": "6",
                    "funcCode": "WCSInStore",
                    "funcName": "配料补录",
                    "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                    "route": "/pages/WorkShop/MaterialReplenish/MaterialReplenish" // 页面路由MaterialReplenish
                }
                , {
                    "funcId": "7",
                    "funcCode": "WCSInStore",
                    "funcName": "PDA测试",
                    "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                    "route": "/pages/index/data" // 页面路由
                }
                

            ]
        },
        {
            "funcId": "2",
            "funcName": "仓库",
            "children": [ // 嵌套子功能
                {
                    "funcId": "1",
                    "funcCode": "WCSInStore",
                    "funcName": "WCS入库",
                    "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                    "route": "/pages/WareHouse/WCSStorage/WCSStorage" // 页面路由
                },
                {
                    "funcId": "2",
                    "funcCode": "WCSInStore",
                    "funcName": "WCS出库",
                    "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                    "route": "/pages/store/index" // 页面路由
                },
                {
                    "funcId": "3",
                    "funcCode": "WCSInStore",
                    "funcName": "SCS调拨",
                    "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                    "route": "/pages/store/index" // 页面路由
                }, {
                    "funcId": "4",
                    "funcCode": "WCSInStore",
                    "funcName": "库存查询",
                    "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                    "route": "/pages/store/index" // 页面路由
                }, {
                    "funcId": "5",
                    "funcCode": "WCSInStore",
                    "funcName": "WCS盘点",
                    "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                    "route": "/pages/store/index" // 页面路由
                }, {
                    "funcId": "6",
                    "funcCode": "WCSInStore",
                    "funcName": "WCS复盘",
                    "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                    "route": "/pages/store/index" // 页面路由
                }
                , {
                    "funcId": "7",
                    "funcCode": "WCSInStore",
                    "funcName": "PDA测试",
                    "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                    "route": "/pages/index/data" // 页面路由
                }
            ]
        },
        {
            "funcId": "3",
            "funcName": "通用",
            "children": [ // 嵌套子功能
                {
                    "funcId": "1",
                    "funcCode": "WCSInStore",
                    "funcName": "物料查标",
                     "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                    "route": "/pages/store/index" // 页面路由
                }, {
                    "funcId": "2",
                    "funcCode": "WCSInStore",
                    "funcName": "物料质检",
                     "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                    "route": "/pages/store/index" // 页面路由
                }
                , {
                    "funcId": "3",
                    "funcCode": "WCSInStore",
                    "funcName": "物料存放位",
                     "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                    "route": "/pages/store/index" // 页面路由
                }
            ]
        },
        {
            "funcId": "4",
            "funcName": "统计",
            "children": [ // 嵌套子功能
                {
                    "funcId": "1",
                    "funcCode": "WCSInStore",
                    "funcName": "物料单统计",
                     "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                    "route": "/pages/store/index" // 页面路由
                }, {
                    "funcId": "2",
                    "funcCode": "WCSInStore",
                    "funcName": "乳化设备统计",
                     "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                    "route": "/pages/store/index" // 页面路由
                }
                , {
                    "funcId": "3",
                    "funcCode": "WCSInStore",
                    "funcName": "乳化制造车间统计",
                     "icon": "/src/static/icon/functionicon/buliao.png", // 图标路径
                    "route": "/pages/store/index" // 页面路由
                }
            ]
        }
    ]
};
const funict=( route:string)=>{
    console.log("被点击"+route);
      // 跳转到首页
    uni.navigateTo({
    url: route
    });
}
// console.log(menu);
let use = ref<string>(""); // 定义一个响应式变量 value，用于绑定输入框的
let pad = ref<string>(""); // 定义一个响应式变量 pad，用于绑定输入框的密码
</script>
<style scoped>
.Login {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* margin-top: 40px; */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    /* justify-content: center; */
    min-height: 100vh;
    background-color: #F7F3F1;
    /* background-image: url("/src/static/log/Loginbg3.png"); */
    background-size: 100% 100%;
}

/* 顶部栏容器样式 */
.tap {
    width: 100%;
    height: 60px;
    background-color: #FFFFFF;
    display: flex;
    /* 使用flex布局 */
    border-bottom: 2px solid #acaaa8;
}

/* 三等分子项样式 */
.top-item {
    flex: 1;
    /* 每个子项平均分配宽度 */
    height: 100%;
    /* 高度占满父容器 */
    display: flex;
    /* 子项内部使用flex布局 */
    /* justify-content: center; 
  align-items: center;  */
}

/* 返回按钮样式 */
.back-btn {
    font-size: 40px;
    color: #333;
    line-height: 60px;
    margin-left: 20px;
}

.top-title {

    justify-content: center;
    line-height: 60px;
}

/* 标题文本样式 */
.title {
    font-size: 18px;
    font-weight: bold;
    color: #333;

}

.top-right {
    justify-content: flex-end;
    /* 子元素靠右对齐 */
    padding-right: 20px;
    /* 右侧留出边距 */
}

/* 菜单按钮样式 */
.menu-btn {
    font-size: 40px;
    color: #333;
    right: 0px;
}

/* 功能区 */
.function {
    background-color: #F7F3F1;
    width: 100%;
    min-height: 100vh;


}

.function-title {
    width: 100%;
    height: 40px;
    /* background-color: #FFFFF; */
    display: flex;
    font-size: 20px;
    margin-left: 20px;
}

.funcNametitle {
    width: 100%;
    /* align-items: center; */
    /* background-color: aqua; */
    line-height: 60px;
}

.Sub-function {

    display: flex;
    flex-wrap: wrap;
    /* 允许换行 */
    margin: 10px;


}

.Sub-function-min {
    /* width: calc(25% - 8px); */
    flex: 4;
    /* 4个一排的计算公式：(100% / 4) - 间距补偿 */
    display: flex;
    /* 内部垂直居中对齐 */
    flex-direction: column;
    /* 图标在上文字在下 */
    align-items: center;
    /* 水平居中 */
    margin: 10px;
}

.Sub-function-min-image {
    width: 50px;
    height: 50px;
}

.Sub-function-min-text {
    color: #434241;
}
</style>
